<template>
	<view class="content">
		<view class="title">手机号登录/注册</view>
		<view class="form-block">
			<view class="form-item">
				<input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入手机号码"
					placeholder-class="inputPlaceholder" class="form-ctrl" />
			</view>
			<view class="form-item">
				<input type="number" maxlength="6" v-model="form.mobileCode" placeholder="请输入短信验证码"
					placeholder-class="inputPlaceholder" class="form-ctrl" />
				<view @click="sendAuthCode" class="auth-code-btn">{{btnText}}</view>
			</view>
		</view>
		<view class="agreement-block">
			<view class="agreement-block">
				<checkbox-group @change="checkChange">
					<checkbox color="#FF7626" id="check" class="checkbox"  /><label for="check"
						class="radio-label">我已阅读并同意<text class="agreement" @click="navigate('/page_other/user/law')">
							《用户服务协议》</text><text class="agreement"
							@click="navigate('/page_other/user/privacy')">《个人信息保护政策》</text>，未注册的手机号将自动完成注册</label>
				</checkbox-group>
			</view>
		</view>
		<view @click="handleSubmit" class="btn">下一步</view>
	</view>
</template>

<script>
	import {
		sendMessageCodeApi
	} from '@/api/user.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		getStorage
	} from '@/util/auth.js'
	export default {
		data() {
			return {
				form: {
					mobile: '',
					mobileCode: '',
					checked: [],
				},
				rules: {
					mobile: {
						name: '手机号码',
						required: true,
						validator: function(value, form, callback) {
							const phoneReg =
								/^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/;

							if (value.length != 11) {
								callback('请输入正确的手机号');
							} else if (!phoneReg.test(value)) {
								callback('请输入正确的手机号');
							}
							callback();
						}
					},
					mobileCode: {
						name: '验证码',
						required: true,
						validator: function(value, form, callback) {
							if (value.length != 6) {
								callback('请输入正确的验证码');
							}
							callback();
						}
					},
					checked: {
						name: '',
						required: false,
						validator: function(value, form, callback) {
							if (value.length == 0) {
								callback('请勾选同意协议！');
							}
							callback();
						}
					},
				},
				btnText: '获取验证码',
				seconds: 0,
			}
		},
		methods: {
			sendAuthCode() {
				if (this.seconds == 0) {
					if (!this.form.mobile) {
						this.showToast('请先输入手机号码！');
						return false;
					}
					uni.showLoading({
						title: '发送中！',
						mask: true,
					})
					sendMessageCodeApi({
						mobile: this.form.mobile,
						type: 0
					}).then((res) => {
						uni.hideLoading()
						this.showToast('发送成功！');
						this.setCountDown(60)
					}).catch((res) => {
						uni.hideLoading()
						this.showToast('验证码发送失败！');
					})
				}
			},
			setCountDown(seconds) {
				let _this = this;
				this.countDown = setInterval(function() {
					seconds = seconds > 0 ? seconds - 1 : seconds;
					let sendCodeText = seconds > 0 ? `重新获取(${seconds}s)` : '获取验证码';
					_this.btnText = sendCodeText;
					_this.seconds = seconds;
					if (seconds == 0) {
						clearInterval(_this.countDown);
					}
				}, 1000)
			},
			checkChange(e) {
				this.form.checked = e.detail.value;
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			handleSubmit() {
				if (validate(this.form, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true,
					})
					this.form.type = this.$store.getters.identity;
					this.$store.dispatch('user/login', this.form).then(() => {
						uni.showLoading({
							title: '登录中',
							mask: true
						})
						this.$store.dispatch('user/loginIM').then(() => {
							const user = this.$store.getters.user;
							if (getStorage('identity') == 2 && user.authenticationStatus == 3) {
								this.showToast('等待审核中', () => {
									uni.navigateTo({
										url: '/page_other/enterprise/authorization/examine'
									})
								})
							} else {
								this.showToast('登录成功', () => {
									uni.switchTab({
										url: '/pages/mine/index'
									})
								});
							}
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: 0 60rpx;

		.title {
			font-size: 56rpx;
			font-weight: bold;
			margin: 140rpx 0 100rpx 0;
		}

		.form-block {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.form-item {
				margin: 16rpx 0;
				width: 100%;
				background: #fff;
				height: 100rpx;
				border-radius: 60rpx;
				font-size: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 30rpx;

				.form-ctrl {
					width: calc(100% - 160rpx);
					height: 100%;
					line-height: 100rpx;
					color: #313131;
				}

				.auth-code-btn {
					width: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FF7626;
				}
			}
		}

		.agreement-block {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;

			.radio-label {
				font-size: 24rpx;

				.agreement {
					color: #FF7626;
				}
			}

			.checkbox {
				transform: scale(0.7);
			}
		}

		.btn {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #FF7626;
			border-radius: 60rpx;
			font-size: 30rpx;
			margin-top: 40rpx;
		}
	}
</style>